<template>
  <div class="ans">
    <div class="ans-box">
      <div v-if="questionItem.item">
        <p class="question">
          【{{ questionItem.item.type | formatType }}】{{
            questionItem.item.title
          }}
        </p>
        <div class="tags">
          <span
            class="tag"
            v-for="(item, index) in questionItem.item.tag"
            :key="index"
            >{{ item }}</span
          >
        </div>
        <div class="options-box">
          <!-- 单选题 -->
          <div class="radio" v-if="questionItem.item.type === 1">
            <van-radio-group v-model="radio">
              <van-radio
                :class="{
                  right: checkList[index] === questionItem.singleAnswer,
                  error:
                    questionItem.isRight === false &&
                    checkList[index] == questionItem.userSing
                }"
                :name="checkList[index]"
                v-for="(item, index) in questionItem.item.option"
                :key="index"
                @click="checkthis"
                :disabled="questionItem.hasOwnProperty('subimt')"
              >
                <template #icon="props">
                  <span :class="{ active: props.checked }"></span>
                </template>
                <span class="content"
                  >{{ checkList[index] }}.<span class="inner">{{
                    item
                  }}</span></span
                >
                <i class="iconfont iconicon_zhengque"></i>
                <i class="iconfont iconicon_cuowu"></i>
              </van-radio>
            </van-radio-group>
          </div>
          <!-- 多选题 -->
          <div class="multiple" v-else-if="questionItem.item.type === 2">
            <van-checkbox-group v-model="result">
              <van-checkbox
                :class="getClass(checkList[index])"
                :name="checkList[index]"
                v-for="(item, index) in questionItem.item.option"
                :key="index"
                @click="checkthis"
                :disabled="questionItem.hasOwnProperty('subimt')"
              >
                <template #icon="props">
                  <span :class="{ active: props.checked }"></span>
                </template>
                <span class="content"
                  >{{ checkList[index] }}. <span class="inner">{{ item }}</span>
                </span>
                <i class="iconfont iconicon_zhengque"></i>
                <i class="iconfont iconicon_cuowu"></i>
              </van-checkbox>
            </van-checkbox-group>
          </div>
          <!-- 简答题 -->
          <div class="short" v-else>
            <div>
              <img
                :src="picUrl[picStyle]"
                alt=""
                @click="imgClick"
                v-if="picStyle === 0"
              />
              <img :src="picUrl[picStyle]" v-else alt="" />
            </div>
          </div>
        </div>
        <div class="hasSubmit" v-if="questionItem.hasOwnProperty('subimt')">
          <h3>答案解析</h3>
          <div class="answer">
            正确答案:{{
              (questionItem.subimt.singleAnswer ||
                questionItem.subimt.multipleAnswer ||
                '') | formatAnswer
            }}
          </div>
          <div
            class="useranswer"
            :class="{
              right: questionItem.isRight === true,
              error: questionItem.isRight === false
            }"
            v-if="questionItem.item.type === 1 || questionItem.item.type === 2"
          >
            您的答案:{{
              (questionItem.userSing || questionItem.userMult) | formatAnswer
            }}
          </div>
          <div class="info-box">
            <div class="item">难度:{{ questionItem.subimt.difficulty }}</div>
            <div class="item">提交次数:{{ questionItem.subimt.submitNum }}</div>
            <div class="item">
              正确次数:{{ questionItem.subimt.correctNum }}
            </div>
          </div>
          <p class="desc">
            {{ questionItem.subimt.answerAnalysis }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['questionItem'],
  data () {
    return {
      radio: '',
      result: [],
      checkList: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
      picUrl: [
        require('@/assets/luyk.png'),
        require('@/assets/luyk_hover.png')
      ],
      picStyle: 0,
      loop: 0
    }
  },
  methods: {
    checkthis () {
      this.$emit('check', this.radio, this.result)
    },
    getClass (val) {
      if ('multipleAnswer' in this.questionItem) {
        if (this.questionItem.multipleAnswer.includes(val)) {
          return 'right'
        } else if (this.questionItem.userMult.includes(val)) {
          return 'error'
        }
      } else {
        return ''
      }
    },
    imgClick () {
      this.$toast.fail('录音功能尚未实现')
      this.picStyle = 1
    }
  }
}
</script>

<style lang="less" scoped>
.ans {
  .ans-box {
    padding: 20px 15px 10px;
    background-color: #fff;
    .question {
      font-size: 16px;
      font-weight: 400;
      text-align: justify;
      color: #181a39;
    }
    .tags {
      transform: translateY(-10px);
      .tag {
        height: 18px;
        background: #f7f4f5;
        border-radius: 3px;
        margin-right: 7px;
        font-size: 12px;
        font-weight: 400;
        color: #b4b4bd;
        padding: 2px 7px;
      }
    }
    .options-box {
      margin-top: 28px;
      padding-bottom: 32px;
      border-bottom: 1px solid #f5f6f7;
    }
    /deep/.van-radio,
    /deep/.van-checkbox {
      min-height: 50px;
      border: 1px solid #f7f4f5;
      margin-bottom: 16px;
      font-size: 16px;
      color: #181a39;
      border-radius: 4px;
      padding: 5px 15px;
      &[aria-checked='true'] {
        border-color: #b4b4bd;
      }
      &.error {
        background: #ffefea;
        border-color: transparent;
        .van-radio__label,
        .van-checkbox__label {
          .iconicon_cuowu {
            display: flex;
            color: #ec5851;
          }
        }
      }
      &.right {
        background: #ddfad9;
        border-color: transparent;
        color: #1dc779;
        .van-radio__label,
        .van-checkbox__label {
          .iconicon_zhengque {
            display: flex;
            color: #1dc779;
          }
        }
      }
      .van-radio__label,
      .van-checkbox__label {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-left: 8px;
        color: #323233;
        line-height: 20px;
        .content {
          width: 100%;
          display: flex;
          align-items: center;
          .inner {
            width: 100%;
            word-wrap: break-word;
            word-break: normal;
          }
        }
        .iconfont {
          display: none;
          font-size: 25px;
        }
      }
    }
    .hasSubmit {
      h3 {
        margin: 0;
        margin-top: 18px;
        font-size: 18px;
      }
      .answer,
      .useranswer {
        margin-top: 18px;
        font-size: 16px;
        color: #1dc779;
      }
      .useranswer {
        &.right {
          color: #1dc779;
        }
        &.error {
          color: red;
        }
      }
      .info-box {
        margin-top: 19px;
        padding: 10px;
        background: #f7f4f5;
        display: flex;
        border-radius: 4px;
        justify-content: space-between;
        font-size: 12px;
        color: #545671;
      }
      .desc {
        margin-top: 20px;
        text-align: justify;
        color: #181a39;
        line-height: 23px;
        font-size: 16px;
        margin-bottom: 85px;
      }
    }
    .short {
      text-align: center;
    }
  }
}
</style>
